<template>
  <div style="background-color: #000;">
    <div class="container">
      <!-- 面包屑start -->
      <el-breadcrumb separator="/" class="breadCrumb_Box">
        <el-breadcrumb-item><a @click="goUrl('/adhibition', 'adhibition')">App封装</a></el-breadcrumb-item>
        <el-breadcrumb-item>{{c_breadCrumb_name}}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 面包屑end -->
      <el-row class="tac content">
        <el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
          <Navmenu @handleClickApp="handleClickApp"></Navmenu>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20" :key="active">
          <div>
            <router-view></router-view>
          </div>
        </el-col>
      </el-row>
    </div>
    <statement></statement>
  </div>
</template>

<script>
  import iosVisaFree from "@/components/appPackagingMember/iosVisaFree";
  import visaRecord from "@/components/appPackagingMember/visaRecord";
  import Navmenu from '@/components/appPackagingMember/menuApp'
  import statement from "@/components/common/statement";
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      iosVisaFree,
      Navmenu,
      statement,
      visaRecord,
    },
    data() {
      //这里存放数据
      return {
        c_breadCrumb_name: "苹果免签封装",
        // 记录当前tab页
        active: 0,
        rzstatus: '', //实名状态
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      goUrl(path, name) {
        if (name == "appPackaging") {
          location.reload();
        }
        this.$router.push({
          path: path,
          name: name,
        });
      },
      // 接收tab传回来的当前页  刷新存在问题 解决办法 存session 第一个页面为对应的组件 第二个类推 需要拆分出来
      handleClickApp(index) {
        this.active = index
        if (this.active === 0) {
          this.c_breadCrumb_name = "苹果免签封装";
        } else {
          this.c_breadCrumb_name = "封装记录";
        }
      },
      getList() {
        this.$post(this.API.UserMsg).then((res) => {
          // console.log(res);
          let data = res.data;
          this.rzstatus = data.rzstatus;
          // console.log(this.rzstatus);
        })
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      var token_time = sessionStorage["token_time"];
      token_time = parseInt(token_time);
      token_time = token_time + 3600000;
      var now = new Date().getTime();
      if (token_time < now || token_time == undefined || isNaN(token_time)) {
        console.log("未登录");
        this.hasLogin = false;

        //跳转到登录
        sessionStorage.setItem("currentTab_title", "");
        this.$router.push({
          path: "/login",
          name: "login",
        });

        return;
      }
      // console.log(this.active);
      if (sessionStorage.getItem('setMenuIndex_appPackaging') != null) {
        this.active = sessionStorage.getItem('setMenuIndex_appPackaging')
        if (this.active == 0) {
          this.c_breadCrumb_name = "苹果免签封装";
        } else {
          this.c_breadCrumb_name = "封装记录";
        }
      }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},

  }

</script>
<style scoped>
  /* 面包屑  */
  .breadCrumb_Box {
    margin-top: 30px;
  }

  .content {
    margin: 20px 0px 30px 0px;
    background: rgba(30, 30, 30, 0.8);
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
  }

  div>>>.el-alert--warning.is-light {
    background-color: #FFF4E2;
    color: #C0A375;

  }

  .alert_text {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #C0A375;
    margin-top: -2px;
    margin-left: 5px;
  }

  .a_text {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #71B7EC;
    margin-top: -2px;
  }

  a {
    text-decoration: none;
  }

  @media (max-width: 414px) {
    .alert_text {
      font-size: 12px;

    }

    .a_text {
      font-size: 12px;
    }
  }

  .breadCrumb_Box>>>.el-breadcrumb__inner a {
    color: #ee7829;
  }

  .breadCrumb_Box>>>.el-breadcrumb__item .el-breadcrumb__separator {
    color: #fff;
  }

  .breadCrumb_Box>>>.el-breadcrumb__item .el-breadcrumb__inner {
    color: #fff;
  }

  .content>>>.el-menu-vertical-demo.container-table101.el-menu {
    background-color: rgba(30, 30, 30, 0.8);
    border-right: 1px solid #272727;
  }

  .content>>>.el-menu-vertical-demo.container-table101.el-menu .el-menu-item i.iconfont {
    color: #fff;
  }

  .content>>>.el-menu-vertical-demo.container-table101.el-menu .el-menu-item:hover {
    background-color: #ccc;
  }

  .content>>>.el-menu-vertical-demo.container-table101.el-menu .el-menu-item span {
    color: #fff;
  }

</style>
